﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>vuex的使用场景分析与state购物车实例讲解</title>
    <link href="../css/bootstrap.css"/>
    <link href="../css/bootstrap-theme.css"/>
</head>
<body>
<h1>vuex的使用场景分析与state购物车实例讲解</h1><br/>

<div id="app">
    <lists></lists>
</div>
<script src="../js/jquery-2.2.0.min.js"></script>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>

<script type="text/x-template" id="lists">
    <div>
        这是我的模版{{getName}}

        <p> 写个题外话，methods和computed区别。</p>
        <p>1、使用methods的话，页面使用的时候必须像使用方法的方式，例如xxx()来调用。而computed则是写名称就行，不用写()</p>
        <p>2、当你在路由里调组件的时候会发现methods里的会每次跳到该组件的时候都执行一次，而computed只会是第一次加载该组件的时候执行</p>
        <p>其它的话基本都很类似</p>

        <table border="1">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>name</th>
            </tr>

            <tr v-for="v in getGoods">
                <td>{{v.id}}</td>
                <td>{{v.title}}</td>
                <td>{{v.name}}</td>
            </tr>
        </table>
    </div>
</script>

<script>

    let lists = {
        template: '#lists',
        methods:{
            getGoods2(){
                return this.$store.state.goods;
            }
        },
        computed: {
            getName() {
                return this.$store.state.name;
            },
            getGoods(){
                return this.$store.state.goods;
            }
        }
    };

    let store = new Vuex.Store({
        state: {
            name: 'ddd',
            goods: [
                {id:1,title:'标题1',name:'my1'},
                {id:2,title:'标题2',name:'my2'},
                {id:3,title:'标题3',name:'my3'}
            ]
        }
    });

    var app = new Vue({
        el: '#app',
        store,
        components: {lists},
        data: {}
    });
</script>

</body>
</html>